<template>
  <div class="notice">
    <topTip ref="toptip">
      <div class="mesTop">{{mes}}</div>
    </topTip>
    <div class="content">
      <h4 class="title">违章通知上传栏目</h4>
      <div class="space">
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="limit"
          action="http://www.l2bin.top:2480/entrustAudit/uploadEA.json"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :data="mydata"
          :on-success="success"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary" class="select">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" class="btn-success">
            确认上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="mes">
          <p><span>*</span> 委托书至少包含代办了姓名,违章主体公司名称、公章.</p>
          <p><span>*</span> 上传完成以后,请耐心等待3-5个工作日后,可在违法通知栏目里查询结果.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import http from '../util/https'
  import topTip from './top-tip/top-tip'
  import {baseurl} from '../base/config'
  import {mapGetters} from "vuex"

  export default {
    name: "notice",
    data() {
      return {
        mes: "已经成功上传",
        files: [],
        bookId: this.$route.params.bookId,
        fileList: [],
        mydata: {
          // entrustAuditId: this.getid
          entrustAuditId: 408
          //要改
        },
        limit: 1
      }
    },
    components: {
      topTip
    },
    computed: {
      ...mapGetters([
        "setuser"
      ]),
      // mydata() {
      //   const params = {
      //     entrustAuditId: this.setuser.entrustAuditId
      //   };
      //
      //   return params
      // }

    },
    methods: {
      success(response, file, fileList) {
        console.log(response)
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      changeInput() {
        this.fetchData()
      },
      fetchData: async function () {
        const url = baseurl + '/entrustAudit/saveEntrustAudit.json';
        let params = {
          entrustAddress: baseurl + "/entrustAudit/uploadEA.json",
          entrustAuditId: this.bookId //要改
        };
        const res = await http.post(url, params);
      },
      inputFilter(newFile, oldFile, prevent) {
        if (newFile && !oldFile) {
          if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
            return prevent()
          }
          if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
            return prevent()
          }
        }
      },
      inputFile(newFile, oldFile) {
        if (newFile && !oldFile) {
          // add
          console.log('add', newFile)
        }
        if (newFile && oldFile) {
          // update
          console.log('update', newFile)
          this.changeInput();

          // this.$refs.toptip.show()
        }
        if (!newFile && oldFile) {
          // remove
          console.log('remove', oldFile)
        }
      },
      noticeBook() {
        this.$router.push({
          name: "PageQuery",
        })
      }

    }
  }
</script>

<style scoped lang="less" type="text/less">
  .el-button--primary {
    border-color: #449d44;
  }

  .mesTop {
    width: 100%;
    height: .8rem;
    background: #449d44;
    color: #fff;
    text-align: center;
    font-size: .35rem;
    line-height: .8rem;
  }

  .select {
    font-size: .3rem;
    width: 2rem;
    background: #449d44;
    color: #fff;
    border-radius: .2rem;
    outline: none;
    /*height: .7rem;*/
    /*line-height: .7rem;*/
  }

  .el-upload__tip {
    margin-top: 1rem;
    text-align: center;
  }

  .upload-demo {
    margin-top: 1rem;
    text-align: center;
  }

  .btn-success {
    width: 2rem;
    background: #449d44;
    text-align: center;
    border-radius: .2rem;
    vertical-align: center;
    height: .7rem;
    font-size: .3rem;
    color: #fff;
    outline: none;
    border: none;
  }

  .notice {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: 20;
    .contentbox {
      text-align: center;
      .btn-notice {
        margin-top: 1rem;
        width: 2rem;
        height: .8rem;
        background: #449d44;
        border-radius: .3rem;
        color: #fff;
        outline: none;
        border: none;

      }
    }

    .title {
      margin-top: 1rem;
      font-size: .4rem;
      text-align: center;
      margin-bottom: .1rem;
      color: #449d44;

    }
    .space {
      margin-left: .5rem;

      .name {
        font-size: .35rem;
        margin-right: .1rem;
      }
      .FamousCustomer {
        display: inline-block;
        font-size: .35rem
      }
      .upload {
        text-align: center;
        margin-top: 1rem;
        ul {
          height: .5rem;
          width: 100%;
          margin-bottom: .3rem;
        }

        li {
          line-height: .3rem;
        }
        span {
          font-size: .3rem;

        }
      }
      .mes {
        color: red;
        font-size: .25rem;
        padding-top: 1.5rem;
        margin-right: .3rem;
        line-height: .55rem;
        margin-left: .3rem;
        span {
          margin-left: -.3rem;
        }

      }
    }

  }


</style>
